<template>
  <div class="mainWrapper">
    <router-view></router-view>
    <!-- tabbar -->
    <div class="tabbar">
      <div :class="{'thisList':chooseTab==='home'}" @click="goto('home')">
        <div class="iconfont icon-shouye1"></div>
        <div>首页</div>
      </div>
      <div @click="goto('active')" :class="{'thisList':chooseTab==='active'}">
        <div class="iconfont icon-liwuhuodong"></div>
        <div>活动</div>
      </div>
      <div @click="goto('pay')" :class="{'thisList':chooseTab==='pay'}">
        <div class="iconfont icon-baomingchenggong"></div>
        <div>支付</div>
      </div>
      <div @click="goto('message')" :class="{'thisList':chooseTab==='message'}">
        <div class="iconfont icon-xiaoxi"></div>
        <div>消息</div>
      </div>
      <div @click="goto('my')" :class="{'thisList':chooseTab==='my'}">
        <div class="iconfont icon-wode-active"></div>
        <div>我的</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chooseTab: 'home'
    }
  },
  methods: {
    /**
     * 页面跳转
     * @param index
     */
    goto(index) {
      switch (index) {
        case 'home':
          this.$router.push({path: '/listhome'})
          this.chooseTab = 'home'
          break
        case 'active':
          this.$router.push({path: '/listactivities'})
          this.chooseTab = 'active'
          break
        case 'pay':
          this.$router.push({path: '/listpayment'})
          this.chooseTab = 'pay'
          break
        case 'message':
          this.$router.push({path: '/listMessage'})
          this.chooseTab = 'message'
          break
        case 'my':
          this.$router.push({path: '/listMy'})
          this.chooseTab = 'my'
          break
        default:
          break
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.mainWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* tabbar */
.tabbar {
  width: 100%;
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 13px 0;
  justify-content: space-around;
  text-align: center;
  font-size: 10px;
  box-shadow: 0 -5px 10px #ccc;

  .thisList {
    color: #64C005;
  }
}

</style>
